<!-- directive:title NG指令详解 -->
<!-- directive:breadcrumb NG指令详解 -->
<div class="panel-body">
    <div class='panel panel-default'>
        <div class='panel-heading'> ng-style 应用于显式改变样式 </div>
        <div class='panel-body'>
            <input type="button" class="btn btn-danger" value="变更字体颜色" ng-click="myStyle={color:'red'}">
            <input type="button" class="btn btn-danger" value="变更背景颜色" ng-click="myStyle={'background-color':'blue'}">
            <input type="button" class="btn btn-danger" value="clear" ng-click="myStyle={}">
            <span ng-style="myStyle">Sample Text</span>
            <script type="text/xianjs" ui-bs>
                <input type="button" class="btn btn-danger" value="变更字体颜色" ng-click="myStyle={color:'red'}">
                <input type="button" class="btn btn-danger" value="变更背景颜色" ng-click="myStyle={'background-color':'blue'}">
                <input type="button" class="btn btn-danger" value="clear" ng-click="myStyle={}">
                <span ng-style="myStyle">Sample Text</span>
            </script>
            <hr />
            <input type="button" class="btn btn-danger" value="变更字体颜色" ng-click="myStyle2='red'">
            <input type="button" class="btn btn-danger" value="clear" ng-click="myStyle2=''">
            <input type="button" class="btn btn-danger" value="变大" ng-click="myStyle3=30">
            <span ng-style="{color:myStyle2,fontSize:myStyle3+'px'}">Sample Text</span>
            <span style="color:{{myStyle2}}">Sample Text (这样也是有效的 不过建议憋这么用)</span>
            <script type="text/xianjs" ui-bs>
                <input type="button" class="btn btn-danger" value="变更字体颜色" ng-click="myStyle2='red'">
                <input type="button" class="btn btn-danger" value="clear" ng-click="myStyle2=''">
                <input type="button" class="btn btn-danger" value="变大" ng-click="myStyle3=30">
                <span ng-style="{color:myStyle2,fontSize:myStyle3+'px'}" note="注意不要在这里面写分号">Sample Text</span>
                <span style="color:{{myStyle2}}">Sample Text (这样也是有效的 不过建议憋这么用)</span>
            </script>
            <hr />
            <p class="text-danger">
                最近发现NG计算方式结合css会导致ie11卡死
                <span style="color:{{xx}};">style</span>
                <span ng-style="{'color':xx2};">ng-style</span>
            </p>
            <script type="text/xianjs" ui-bs>
                style="width:calc(100%/{{row2.classhoursarr.length}});" // 绝对禁止两种语言的动态计算 其实一种就够了
                style="width:{{100/row2.classhoursarr.length}}%;" // 完美解决 但不建议使用这种格式
                ng-style="{'width':(100/row2.classhoursarr.length)+'%'};" // 完美解决
            </script>
        </div>
    </div>
</div>


